import React from 'react';

export default class UserSettingList extends React.Component {
  constructor(props) {
    super(props)
  }

  renderList() {
    var self = this;
    var content = [];
    if (this.props.data) {
      this.props.data.forEach(function(data, index) {
        var name = "";
        var propertyName = "";
        var unit = data.unit;
        if (unit) {
          var sys_user = unit.sys_user;
          if (sys_user) {
            name = sys_user.first_name+" "+sys_user.last_name
          }
          var property = unit.property
          if (property) {
            propertyName = property.name
          }
        }
        content.push((
          <tr>
            <td>{data.unit.unit_desc}</td>
            <td>{data.kerry_user?data.kerry_user.name:""}</td>
            {
              // <td>{propertyName}</td>
              // <td>{name}</td>
            }
            <td>{data.kerry_user?data.kerry_user.mobile:""}</td>

            <td className="infoTd">
              <a className="info" onClick={(event)=>self.props.onEditClick(index)}>详情</a>
              <a className="delete f-dn" onClick={(event)=>self.props.onDeleteClick(data.id)}>删除</a>
              <a className="delete" onClick={(event)=>self.props.onDetailClick(data.unit.unit_number)}>查看绑定情况</a>
            </td>
          </tr>
        ))
      })
    }

    return content
  }

  render() {
    return(
      <div className="User-setting-list setting-list">
        <table className="table">
          <thead>
            <tr className="table-title">
              <th>户号</th>
              <th>姓名</th>
              <th>联系方式</th>
              {
                // <th>物业</th>
                // <th>物业管家</th>
              }

              <th className="infoTh">详情</th>
            </tr>
          </thead>
          <tbody>
            {this.renderList()}
          </tbody>
        </table>
      </div>
    )
  }
}
